<template>
  <div class="main">
    <!--卡片-->
    <el-col :span="18" class="main">
      <el-card class="maincard" body-style="height:100%">
        <div class="bg">
          <!--左侧表单-->
          <el-col :span="12" class="half">
            <div class="le">
              <el-card class="fo">
                <el-form :model="form" label-width="auto" style="max-width: 600px" :rules="formRules" ref="formRef">
                  <el-form-item label="姓名：" prop="name">
                    <el-input v-model="form.name" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-form-item label="性别：" prop="gender">
                    <el-radio-group v-model="form.gender">
                      <el-radio value="女" :disabled="state == '待评审' || state == '已通过'">女</el-radio>
                      <el-radio value="男" :disabled="state == '待评审' || state == '已通过'">男</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="年龄：" prop="age">
                    <el-input v-model="form.age" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-form-item label="身份证号：" prop="idnum">
                    <el-input v-model="form.idnum" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-form-item label="电话：" prop="phone">
                    <el-input v-model="form.phone" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-form-item label="紧急联系人电话：" prop="familyphone">
                    <el-input v-model="form.familyphone" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <!-- <el-form-item label="家庭住址：">
                    <el-input v-model="form.address" />
                  </el-form-item> -->
                  <el-form-item label="表单类型：">
                    <el-radio-group v-model="form.kind">
                      <el-radio value="0" :disabled="state == '待评审' || state == '已通过'">入住</el-radio>
                      <el-radio value="1" :disabled="state == '待评审' || state == '已通过'">退宿</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="预约时间：" prop="time">
                    <el-date-picker v-model="form.time" type="datetime" :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-form-item label="备注：" prop="noties">
                    <el-input v-model="form.noties" style="width: 240px" :rows="5" resize="none" type="textarea"
                      :readonly="state == '待评审' || state == '已通过'" />
                  </el-form-item>
                  <el-button class="button" @click="getInfo('入住登记')">刷新入住登记</el-button>
                  <el-button class="button" @click="getInfo('退宿登记')">刷新退宿登记</el-button>
                </el-form>
              </el-card>
            </div>
          </el-col>
          <!--右侧提交-->
          <el-col :span="12" class="half">
            <div class="ri">
              <el-row :span="24" class="haup">
                <div class="photo">
                  <el-card style="width: 80%">
                    <!--提交图片-->
                    <el-upload class="upload-demo" drag
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
                      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                      <div class="el-upload__text">
                        点击上传图片或 <em>点击这里</em>
                      </div>
                      <template #tip>
                        <div class="el-upload__tip">图片大小不大于500k</div>
                      </template>
                    </el-upload>
                    <div class="under">
                      <el-button class="button">取消</el-button>
                      <el-button type="primary" class="button">上传图片</el-button>
                    </div>
                  </el-card>
                </div>
              </el-row>
              <el-row :span="12" class="hado">
                <div class="fstate">
                  <el-text type="info" size="large">状态：{{ state }}</el-text>
                </div>
                <div class="bu2">
                  <el-button type="primary" class="button" @click="onSubmit"
                    :disabled="state == '待评审' || state == '已通过'">提交</el-button>
                </div>
              </el-row>
            </div>
          </el-col>
        </div>
      </el-card>
    </el-col>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as user from '@/api/user.js';
import { computed } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus'

// do not use same name with ref
const form = reactive({});
const state = ref("未提交");
form.gender = "女";
form.kind = "0";
const store = useStore();
const getAccId = computed(() => store.getters.getId);
const formRef = ref()
//验证手机号的规则
const checkMobile = (rule, value, cb) => {
  //验证手机号的正则表达式
  const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

  if (regMobile.test(value)) {
    //合法的手机号
    return cb()
  }

  cb(new Error('请输入合法的手机号'))
}
const checkIDNumber = (rule, value, cb) => {
  const check = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/;
  if (check.test(value)) {
    return cb()
  } else {
    cb(new Error('身份证号格式错误'))
  }

}
const checkAge = (rule, value, cb) => {
  const check = /^\d+$/;
  if (check.test(value)) {
    return cb()
  } else {
    cb(new Error('年龄必须是数字'))
  }

}
const formRules = reactive({
  familyphone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    // { min: 1, max: 10, message: '工号长度1~10个数字', trigger: 'blur' },
    { validator: checkMobile, trigger: 'blur' },
  ],
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { min: 1, max: 20, message: '姓名长度1~20个字符', trigger: 'blur' },
  ],
  noties: [
    { required: false, message: '', trigger: 'blur' },
    { min: 1, max: 200, message: '备注长度1~200个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { validator: checkMobile, trigger: 'blur' }
  ],
  idnum: [
    { required: true, message: '身份证号不能为空', trigger: 'blur' },
    { validator: checkIDNumber, trigger: 'blur' }
  ],
  age: [
    { required: true, message: '年龄不能为空', trigger: 'blur' },
    { validator: checkAge, trigger: 'blur' }
  ],
  time: [
    { required: true, message: '日期不能为空' },
  ]
})
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const data = reactive({
        eldName: form.name,
        eldGender: form.gender,
        eldAge: form.age,
        eldIdNum: form.idnum,
        eldPhone: form.phone,
        eldFamilyPhone: form.familyphone,
        eldIntime: form.time,
        accId: getAccId,
        recordContents: form.noties,
        typeofrecord: form.kind == '0' ? '入住登记' : '退宿登记'
      })
      user.checkinAPI(data).then((resp) => {
        if (resp.data.code !== 2000) {
          ElMessage({
            type: 'error',
            message: resp.data.message,
          })
          return
        }
        ElMessage({
          type: 'success',
          message: resp.data.message,
        })
        if (form.kind == '0') {
          getInfo("入住登记");
        } else {
          getInfo("退宿登记");
        }

      })
    }
  }
  )
};
const getInfo = (val) => {
  form.kind = val == '入住登记' ? '0' : '1'
  const params = reactive({
    accId: getAccId,
    typeofrecord: val
  });
  user.findCheckinAPI(params).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: 'error',
        message: resp.data.message,
      })
      return
    }
    form.name = resp.data.data.eldName;
    form.gender = resp.data.data.eldGender;
    form.age = resp.data.data.eldAge;
    form.idnum = resp.data.data.eldIdNum;
    form.phone = resp.data.data.eldPhone;
    form.familyphone = resp.data.data.eldFamilyPhone;
    form.time = resp.data.data.eldIntime;
    form.noties = resp.data.data.recordContents;
    switch (resp.data.data.recordState) {
      case 0:
        state.value = "待评审";
        break;
      case 1:
        state.value = "未通过";
        break;
      case 2:
        state.value = "已通过";
        break;

      default:
        state.value = "未提交";
        break;
    }
  })
}
onMounted(() => {
  getInfo('入住登记');
})
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .maincard {
    width: 100%;
    height: 100%;

    .bg {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .half {
        width: 100%;
        height: 100%;
      }

      .le {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .fo {
          width: 85%;
          height: 100%;
          margin-top: 300px;
          margin-bottom: 300px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .ri {
        width: 100%;
        height: 100%;

        .under {
          display: flex;
          justify-content: flex-end;
        }

        .button {
          margin-left: 50px;
        }

        .haup {
          width: 100%;
          height: 70%;

          .photo {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin-top: 5%;
          }
        }

        .hado {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-end;

          .bu2 {
            margin-right: 10%;
            margin-top: 25%;
          }
        }
      }
    }
  }
}
</style>
